

<table style="width: 100%;">
    <tr>
        <td style="width: 375px;vertical-align: top">
            <div id="tabs">
                <ul>

                    <li><a href="#tabs-1">Page Settings</a></li>
                    <li><a href="#tabs-2">Add Fields</a></li>
                    <li><a href="#tabs-3">Customize</a></li>
                    <li><a href="#tabs-4">Events</a></li>
                </ul>

                <div id="tabs-1">
                    <fieldset>
                        <legend>General</legend>

                        <table border="0">
                            <tbody>
                                <tr>
                                    <td>Name</td>
                                    <td><input name="page_name" /></td>
                                </tr>
                                <tr>
                                    <td>Heading</td>
                                    <td><input name="heading" /></td>
                                </tr>
                                <tr>
                                    <td>Title</td>
                                    <td><input name="title" /></td>
                                </tr>
                                <tr>
                                    <td>Menu</td>
                                    <td><input name="menu_required"  type="checkbox"/></td>
                                </tr>
                                <tr>
                                    <td>No of columns</td>
                                    <td><input type=number id="cols" min="1" max="99" step="1" value="3" required="true"/></td>
                                </tr>
                                <tr>
                                    <td>No of Rows</td>
                                    <td><input type=number id="rows" min="1" max="99" step="1" value="5" required="true"/></td>
                                </tr>
                            </tbody>
                        </table>
                    </fieldset>
                </div>
                <div id="tabs-2">
                    <div id="products">

                        <div id="catalog">
                            <h2><a href="#">DB Columns</a></h2>
                            <div>
                                <ul>
                                    <li>one</li>
                                    <li>two</li>
                                    <li>three</li>
                                    <li>four</li>
                                    <li>five</li>
                                </ul>
                            </div>
                            <h2><a href="#">HTML</a></h2>
                            <div>
                                <ul>
                                    <li>Zebra Striped</li>
                                    <li>Black Leather</li>
                                    <li>Alligator Leather</li>
                                </ul>
                            </div>
                            <h2><a href="#">Common</a></h2>
                            <div>
                                <ul>
                                    <li>iPhone</li>
                                    <li>iPod</li>
                                    <li>iPad</li>
                                </ul>
                            </div>
                        </div>
                    </div>


                </div>
                <div id="tabs-3">

                    <fieldset>
                        <legend id="columnName">Column Name</legend>
                        <table border="0">

                            <tbody>
                                <tr>
                                    <td colspan="2">
                                        <fieldset><legend>Display</legend>
                                            <table>
                                                <tr>
                                                    <td colspan="2">Name : <input name="column_display_name" /></td>
                                                    <td>Edit : 
                                                        <select name ="edit_type">
                                                            <option value="select" selected>select</option>
                                                            <option value="multiselect">Multi Select</option>
                                                            <option value="checkbox">checkbox</option>
                                                            <option value="radio">radio</option>
                                                            <option value="readonly">Read Only</option>
                                                            <option value="hidden">hidden</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        View : 
                                                        <select name="view_type" >
                                                            <option value="label" selected>Label</option>
                                                            <option value="date">Date</option>
                                                            <option value="hyperlink">Hyper Link</option>
                                                            <option value="image">Image</option>
                                                            <option value="file">File</option>
                                                            <option value="html">HTML</option>
                                                            <option value="audio">Audio</option>
                                                            <option value="video">Video</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                            </table>
                                        </fieldset>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <fieldset><legend>Data</legend>
                                            <table>
                                                <tbody><tr>
                                                        <td>
                                                            <input type="hidden" name="reference_table" value="">
                                                            <label>Columns</label>
                                                        </td>
                                                        <td>
                                                            <input name="column" value="">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <label>Condition</label>
                                                        </td>
                                                        <td>
                                                            <input name="reference_column_condition" >
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <label>Order by</label>
                                                        </td>
                                                        <td>
                                                            <input name="reference_column_orderby">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <label>Add on Fly</label>
                                                        </td>
                                                        <td>
                                                            <input type="checkbox" name="user_id_addonfly"  checked="">
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </fieldset>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <fieldset>
                                            <legend>Properties</legend>
                                            <table>
                                                <tbody><tr>
                                                        <td>
                                                            Mandatory
                                                        </td>
                                                        <td>
                                                            <input type="checkbox" name="mandatory">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Place holder 
                                                        </td>
                                                        <td>
                                                            <input name="placeholder">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Default Value 
                                                        </td>
                                                        <td>
                                                            <input name="default_value" >
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Formatting 
                                                        </td>
                                                        <td>
                                                            <div style="text-align: left;vertical-align: top">
                                                                <span id="format" >
                                                                    <input type="checkbox" id="bold" /><label for="bold">B</label>
                                                                    <input type="checkbox" id="italic" /><label for="italic">I</label>
                                                                    <input type="checkbox" id="underline" /><label for="underline">U</label>
                                                                </span>

                                                                <span id="align">
                                                                    <input type="radio" id="left" name="left" />
                                                                    <img style="border:3px solid green" src="{$AppImgURL}/sc_alignleft.png" />
                                                                    <input type="radio" id="center" name="center" />
                                                                    <img src="{$AppImgURL}/sc_alignhorizontalcenter.png" />
                                                                    <input type="radio" id="right" name="right" />
                                                                    <img src="{$AppImgURL}/alignright.png" />
                                                                </span>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Validations 
                                                        </td>
                                                        <td>
                                                            <select name="error">
                                                                <option value="no_validations">No validations</option>
                                                                <option value="number">Number</option>                                                  
                                                                <option value="pattern">Pattern</option>
                                                                <option value="pattern">Custom</option>
                                                            </select>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Validation Pattern 
                                                        </td>
                                                        <td>
                                                            <input name="validation_pattern_value">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            JavaScript 
                                                        </td>
                                                        <td>
                                                            <textarea name="javascript" rows="" cols="" wrap="soft"></textarea>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </fieldset>
                                    </td>

                                </tr>
                                <tr>
                                    <td colspan="2">

                                        <fieldset><legend>View all</legend>
                                            <label>Show : </label>
                                            <input type="checkbox" name="viewallcolumns" checked="">
                                            <br/>
                                            <label>Calculation : </label>
                                            <input type="text" name="" >
                                        </fieldset>
                                    </td>    


                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <fieldset>
                                            <legend>Dependent</legend>
                                            <label>Control :</label>
                                            <select name="dependent" >
                                                <option value="">--Select--</option>    
                                            </select>
                                            <br>
                                            <label>SQL :</label>
                                            <textarea name="dependent_query" wrap="soft"></textarea>
                                        </fieldset>
                                    </td>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </fieldset>


                </div>
                <div id="tabs-4">
                    4
                </div>
            </div>
        </td>
        <td style="vertical-align: top">
            <div id="designer">
                asdasdasdasdasdasd
            </div>
        </td>
    </tr>

</table>




{literal}
<style>
    div#tabs{


        font-size: 0.8em;
    }

    #tabs-2 li {
        list-style: none;
    }


    #tabs-2 li a {
        text-decoration: none;
        color: #000;


        border: 3px dashed #999;
        background: #eee;
        padding: 10px;
        display: block;
    }

    *[draggable=true] {
        -moz-user-select:none;
        -khtml-user-drag: element;
        cursor: move;
    }

    *:-khtml-drag {
        background-color: rgba(238,238,238, 0.5);
    }


    #tabs-2 li.over {
        border-color: #333;
        background: #ccc;
    }
    .droppable { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; }
    .droppable li{ margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }





</style>
<script>

    $(function() {
        
        $("#tabs").tabs();
        $("#format,#align").buttonset();
        

        createLayout();
        
        $( "#catalog li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
        $( ".divframe ol" ).droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function( event, ui ) {
                $( this ).find( ".placeholder" ).remove();
                $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
                // gets added unintentionally by droppable interacting with sortable
                // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                $( this ).removeClass( "ui-state-default" );
            }
        });

    });

    function createLayout() {

        var rows = $("#rows").val();
        var cols = $("#cols").val();
        var $table = $('<table id="layout" style="width:100%" />');
        var $row = "";
        for (var i = 0; i < rows; i++) {
            $row = $('<tr/>');
            var width = 100 / cols;
            for (var j = 0; j < cols; j++) {
                $row.append("<td style='width:" + width + "%'>" + '<div class="divframe"><h4 class="subhead">Your Title here...</h4><ol class="droppable"> <li class="placeholder">Add your items here</li></ol></div>' + "</td>")
            }
            $table.append($row);
        }

        $('#designer').html($table);

    }

</script>

{/literal}


